<template>

  <a-layout>
    <a-space direction="vertical" :size="[0,20]">
    <a-layout-header :style="{
      textAlign: 'center',
      color: '#1e1f22',
      fontSize: '24px',
      height: 64,
      paddingInline: 50,
      lineHeight: '64px',
      backgroundColor: '#ffffff',
    }">发布课程</a-layout-header>
    <a-layout-content >
      <a-form
        :model="formState"
        name="add_course"
        v-bind="formItemLayout"
        @finishFailed="onFinishFailed"
        @finish="onFinish"
        layout="horizontal"
    >

      <a-form-item label="老师信息">
        <span class="ant-form-text">{{useUser.userInfo.username}}</span>
      </a-form-item>

      <a-form-item label="邮箱信息">
        <span class="ant-form-text">{{useUser.userInfo.email}}</span>
      </a-form-item>

      <a-form-item label="课程名称:" name="title"  :rules="[{ required: true, message: 'Please enter the course title!' }]">
        <a-input v-model:value="formState.title" placeholder="输入课程名称" />
      </a-form-item>

      <a-form-item label="课程描述" name="description" :rules="[{ required: true, message: 'Please enter the description!' }]">
        <a-textarea v-model:value="formState.description" placeholder="输入课程描述" />
      </a-form-item>

      <a-form-item label="课程分类"  name="categoryId"  :rules="[{ required: true, message: 'Please select a category!' }]">
        <a-space>
        <a-select v-model:value="formState.categoryId" placeholder="输入课程分类">
          <a-select-option :value="data.categoryId" v-for="data in category">{{data.categoryName}}</a-select-option>
        </a-select>
          <a-button type="primary" @click="addCategory">添加分类</a-button>
        </a-space>
      </a-form-item>

      <a-form-item label="价格" name="price" :rules="[{ required: true, message: 'Please enter the price!' }]">
        <a-input-number v-model:value="formState.price" :min="0" placeholder="输入价格" />
      </a-form-item>

      <a-form-item  label="Upload Image"  name="image" extra="上传课程图片">

        <a-upload
            action="http://localhost:5173/api/online/images/upload"
            list-type="picture"
            class="upload-list-inline"
            :before-upload="beforeUpload"
            @change="handleChange"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            upload
          </a-button>
        </a-upload>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form></a-layout-content>
    </a-space>

    <a-modal v-model:open="open" title="确认框" :confirm-loading="confirmLoading" @ok="handleOk">
      <p>{{ modalText }}</p>
    </a-modal>

    <a-modal v-model:open="openCategory" title="添加分类" :confirm-loading="confirmCategoryLoading" @ok="handleOkCategory">
      <a-input v-model:value="catergoryName" placeholder="Basic usage" />
    </a-modal>
  </a-layout>

</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {useUserStore} from "@/stores/user.js"
import { message } from 'ant-design-vue';
import {addCourse, getAllCategory} from "@/apis/course.js";
import { UploadOutlined } from '@ant-design/icons-vue';
import {addCategorys} from "@/apis/category.js";

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};

const formState = reactive({
  title: '',
  description: '',
  categoryId: null,
  price: 0,
  image: '',
});

const useUser = useUserStore();

const category = ref([]);
const allCategory = async () => {
  const res = await getAllCategory();
  category.value = res.data;
}

onMounted(()=>{
  allCategory()
})

const modalText = ref('确认信息是否提交！！！');
const open = ref(false);
const confirmLoading = ref(false);

const handleOk =async () => {
  modalText.value = '提交ing......';
  confirmLoading.value = true;
  const res = await addCourse(formState)
  if (res.code === 1){
    open.value = false;
    confirmLoading.value = false;
    message.success("提交成功")
  }
};

const onFinish = () => {
  open.value = true;
};

const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

const openCategory = ref(false);
const catergoryName=ref('')
const confirmCategoryLoading = ref(false);

const addCategory=()=>{
  openCategory.value = true
  console.log("addCategory")
}
const handleOkCategory=async ()=>{
  modalText.value = '上传中';
  confirmCategoryLoading.value = true;
  const res = await addCategorys(catergoryName.value)
  if (res.code === 1){
    openCategory.value = false;
    confirmCategoryLoading.value = false;
    message.success("提交成功")
  }
}







const handleChange = info => {
  if (info.file.status === 'done') {
    formState.image = info.file.response.data.imageUrl
  }
};


const beforeUpload = file => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};
</script>

<style scoped>
/* tile uploaded pictures */
.upload-list-inline :deep(.ant-upload-list-item) {
  float: left;
  width: 200px;
  margin-right: 8px;
}
.upload-list-inline [class*='-upload-list-rtl'] :deep(.ant-upload-list-item) {
  float: right;
}
</style>
